<template>
	<div id="teacherManage">
		<div class="breadcrumb">
			<img src="../../../../static/img/campus_icon_1.png" class="head_img">
			<span class="title">教师管理</span>
		</div>
		<div class="search">
			<el-select v-model="semester" @change="getTeacherList">
				<el-option v-for='item in semesters' :label='item.semesterName' :key="item.semesterName" :value='item.sid'></el-option>
			</el-select>
		</div>
		<div class="list">
			<div class="list_head">
				<span class="head_name">
					<el-input class="inp" placeholder="请输入教师手机号,教职工号或姓名" icon="search" v-model="input2" @keyup.enter.native="getTeacherList"
					 :on-icon-click="getTeacherList"></el-input>
				</span>
				<el-button class="import" type="primary" @click="importModel">导出模板</el-button>
				<el-button class="export" type="primary" @click="dialogFormVisible = true">导入教师及课程</el-button>
				<el-button class="add" type="primary" @click="addTeacher">添加教师</el-button>
			</div>
			<el-table :data="list">
				<el-table-column prop="name" label="教师姓名">
				</el-table-column>
				<el-table-column prop="username" label="手机号">
				</el-table-column>
				<el-table-column prop="campusid" label="教职工号">
				</el-table-column>
				<el-table-column label="本学期课程">
					<template scope="scope">
						<div v-for="item in scope.row.classList" :key="item">{{item.name}}</div>
					</template>
				</el-table-column>
				<el-table-column width="200px" align="right">
					<template scope="scope">
						<el-button size="small" type="text" @click="editClass(scope.row)">编辑课程</el-button>
						<el-button size="small" type="text" @click="deleteClass(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>

		<el-dialog title="导入教师及课程" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item>
					<el-select v-model="semester_import" @change="changeImportSemester">
						<el-option v-for='item in semesters' :label='item.semesterName' :value='item.sid' :key="item.sid">
						</el-option>
					</el-select>
				</el-form-item>
				<el-upload class="uploadBtn" :action="actionUrl" :on-success="handleSuccess" :on-error="handleError" name="uploadFile" :headers="headers"
				 :show-file-list='false'>
					<el-button type="primary">导入教师及课程</el-button>
				</el-upload>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				headers: {},
				semesters: [],
				form: {
					name: ""
				},
				input2: "",
				semester: "",
				actionUrl: "",
				totalCount: 0,
				semester_import: "",
				dialogFormVisible: false,
				currentPage: parseInt(this.$util.getUrlParam("pageNum")) || 1
			};
		},
		computed: mapState({ user: state => state.user }),
		mounted() {
			//获取学期数据
			this.headers = {
				rootUnid: this.user.rootUnid
			};
			this.getSemester();
		},
		methods: {
			changeImportSemester() {
				this.actionUrl = this.$util.domain + "/campusadminapi/v1/teacher/importtc?sid=" + this.semester_import;
			},
			//上传文件成功钩子
			handleSuccess(response) {
				this.dialogFormVisible = false;
				if (response.type !== 200) {
					this.$util.errorMsg(response.msg);
				} else {
					this.$util.successMsg("上传成功");
					this.getTeacherList();
				}
			},
			/**上传文件失败钩子**/
			handleError(response) {
				if (response.status === 403) {
					this.SIGNOUT();
					location.href = "/login";
				}
				this.$util.errorMsg("上传失败");
			},

			//获取学期列表数据
			getSemester() {
				this.semesters = [];
				let url = this.$util.domain + "/campusadminapi/v1/tools/semesters";

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let semesterList = response.data.data;
						let sid = this.$util.getUrlParam("sid");
						if (semesterList && semesterList.length > 0) {
							this.semester_import = semesterList[0].sid;
							if (sid) {
								this.semester = sid == "0" ? "0" : sid * 1;
								this.input2 = this.$util.getUrlParam("condition");
							} else {
								this.semester = semesterList[0].sid;
							}
							this.actionUrl = this.$util.domain + "/campusadminapi/v1/teacher/importtc?sid=" + semesterList[0].sid;
							for (let i = 0; i < semesterList.length; i++) {
								let $sid = semesterList[i].sid,
									$endDate = semesterList[i].endDate,
									$schoolId = semesterList[i].rootUnid,
									$semesterName = semesterList[i].semesterName;

								this.semesters.push({
									sid: $sid,
									endDate: $endDate,
									semesterName: $semesterName
								});
							}
						}
						this.getTeacherList();
					}
				});
			},

			//删除教师
			deleteClass(row) {
				let url = this.$util.domain + "/campusadminapi/v1/teacher/remove";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						force: 0,
						mid: parseInt(row.mid)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						this.$util.successMsg("删除成功");
						this.getTeacherList();
					} else if (response.data.error == 10001) {
						this.$confirm(response.data.message, "教师信息删除", {
							confirmButtonText: "确定",
							cancelButtonText: "取消"
						}).then(() => {
							this.$http({
								url,
								method: "POST",
								body: JSON.stringify({
									force: 1,
									mid: parseInt(row.mid)
								})
							}).then(data => {
								if (data.data.error == 10000) {
									this.$util.successMsg("删除成功");
									this.getTeacherList();
								} else {
									this.$util.errorMsg(response.data.message);
								}
							});
						}).catch(() => { });
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},

			//搜索教师信息数据
			getTeacherList() {
				this.list = [];
				let url = this.$util.domain + "/teacher/list";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						pageSize: 10,
						sid: parseInt(this.semester),
						condition: this.input2.trimLeft(),
						pageIndex: parseInt(this.currentPage)
					})
				}).then(response => {
					if (response.data.type == 200) {
						this.list = [];
						let teacherList = response.data.infos.listInfo;
						this.totalCount = response.data.infos.teacherNum;
						if (teacherList && teacherList.length > 0) {
							for (let i = 0; i < teacherList.length; i++) {
								let $index = i + 1,
									$id = teacherList[i].id,
									$mid = teacherList[i].mid,
									$sid = teacherList[i].sid,
									$teacherName = teacherList[i].name,
									$campusid = teacherList[i].campusid,
									$campusidmid = teacherList[i].campusid,
									$teacherPhone = teacherList[i].username,
									$classList = teacherList[i].classesList;
									
								this.list.push({
									mid: $mid,
									sid: $sid,
									index: $index,
									name: $teacherName,
									campusid: $campusid,
									classList: $classList,
									campusid: $campusidmid,
									username: $teacherPhone
								});
							}
						}
					}
				});
			},

			//请求分页数据
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getTeacherList();
			},
			//添加教师
			addTeacher() {
				let params = {
					sid: this.semester,
					pageNum: this.currentPage,
					condition: encodeURI(this.input2.trimLeft())
				}
				this.$util.refreshTo("/#/addTeacher", params);
			},
			//导出模板
			importModel() {
				location.href = "http://swapp-images.oss-cn-hangzhou.aliyuncs.com/sw-template/importTeacherClass.xlsx";
			},
			//编辑课程
			editClass(item) {
				let endTime = "";
				for (let i = 0; i < this.semesters.length; i++) {
					if (item.sid == this.semesters[i].sid) {
						endTime = this.semesters[i].endDate;
					}
				}
				let obj = {
					mid: item.mid,
					sid: item.sid,
					endTime: endTime,
					pageNum: this.currentPage,
					condition: encodeURI(this.input2.trimLeft())
				}
				this.$util.refreshTo("/#/editClass", obj);
			}
		}
	};
</script>

<style>
	#teacherManage {
		padding-top: 60px;
		height: calc(100% - 100px);
	}

	#teacherManage .list {
		min-height: calc(100% - 160px);
	}

	#teacherManage .import {
		position: absolute;
		right: 240px;
		border-radius: 0;
	}

	#teacherManage .export {
		position: absolute;
		right: 100px;
		border-radius: 0;
	}

	#teacherManage .add {
		position: absolute;
		right: 0px;
		border-radius: 0;
	}

	#teacherManage .search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 60px;
		line-height: 60px;
		padding: 0 25px;
	}

	#teacherManage .inp {
		width: 300px;
		display: inline-block;
	}

	#teacherManage .edit {
		border-radius: 0;
	}

	#teacherManage .sel_btn {
		position: absolute;
		right: 55px;
		margin-top: 12px;
	}

	#teacherManage .del {
		border-radius: 0;
	}

	#teacherManage .upload-demo {
		width: 30%;
		height: 20px;
	}

	#teacherManage .uploadBtn {
		width: 100%;
		height: 180px;
		text-align: center;
	}

	#teacherManage .el-upload--text.el-upload {
		width: 130px;
		height: 36px;
		border-radius: 2px;
		margin-top: 36px;
	}
</style>